<template>
  <div class="component flow-report">
    <el-form ref="form" :model="model" label-width="80px">
      <el-form-item label="报表类型" prop="reportType">
        <el-select clearable placeholder="请选择" v-model="model.reportType">
          <el-option
            :key="index"
            :label="name"
            :value="code"
            v-for="{ index, name, code } in $dict.getDictData('ReportType')"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起始时间" prop="beginDate">
        <el-date-picker
          :editable="false"
          clearable
          placeholder="选择日期时间"
          type="date"
          v-model="model.beginDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间" prop="endDate">
        <el-date-picker
          :editable="false"
          clearable
          placeholder="选择日期时间"
          type="date"
          v-model="model.endDate"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="" label-width="40px">
        <el-button @click="onClickReset" v-auth="2341">重置</el-button>
        <el-button @click="onClickImport" v-auth="2342">导出</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { ReportManageService } from "~/services/domain-service/report-manage.service";
import { Auth, Layout, Dependencies } from "~/core/decorator";
@Auth(2340)
@Layout("workspace")
@Component({
  components: {}
})
export default class FlowReport extends Vue {
  @Dependencies(ReportManageService)
  private reportManageService: ReportManageService;

  private model: any = {
    endDate: "",
    beginDate: "",
    reportType: ""
  };

  private onClickReset() {
    const form: any = this.$refs["form"];
    form.resetFields();
  }
  private onClickImport() {
    if (!this.model.reportType) return this.$message.error("请选择报表类型！");
    if (!this.model.beginDate) return this.$message.error("请选择起始时间！");
    if (!this.model.endDate) return this.$message.error("请选择截止时间！");
    const start: any = new Date(this.model.beginDate).getTime() / 1000;
    const end: any = new Date(this.model.endDate).getTime() / 1000;
    if (start > end) return this.$message.error("起始时间应该小于截止时间！");
    const params = {
      reportType: this.model.reportType,
      beginDate: `${this.$filter.dateFormat(this.model.beginDate)} 00:00:00`,
      endDate: `${this.$filter.dateFormat(this.model.endDate)} 23:59:59`
    };

    this.reportManageService.exportReport(params).subscribe(data => {
      this.$message.success("报表正在导出，请关注任务中心！");
    });
  }
}
</script>
<style lang="less">
.component.flow-report {
  padding: 30px;
}
</style>
